<template>
	<view class="settings-page">
		<!-- 乡村风格背景 -->
		<view class="village-bg"></view>

		<!-- 顶部导航 -->
		<view class="nav-bar">

			<text class="nav-title">设置中心</text>
		</view>

		<!-- 设置内容 -->
		<scroll-view class="settings-container" scroll-y>
			<!-- 用户信息卡片 -->

			<!-- 账号设置 -->
			<view class="settings-group">
				<text class="group-title">账号设置</text>
				<view class="settings-items">
					<view class="settings-item" @click="navigateTo('profile')">
						<view class="item-left">
							<uni-icons type="person" size="28" color="#4a90e2"></uni-icons>
							<text class="item-title">个人信息</text>
						</view>
						<uni-icons type="arrowright" size="24" color="#999"></uni-icons>
					</view>

					<view class="settings-item" @click="navigateTo('security')">
						<view class="item-left">
							<uni-icons type="locked" size="28" color="#FF9800"></uni-icons>
							<text class="item-title">账号安全</text>
						</view>
						<uni-icons type="arrowright" size="24" color="#999"></uni-icons>
					</view>

					<view class="settings-item" @click="navigateTo('address')">
						<view class="item-left">
							<uni-icons type="location" size="28" color="#4CAF50"></uni-icons>
							<text class="item-title">收货地址</text>
						</view>
						<uni-icons type="arrowright" size="24" color="#999"></uni-icons>
					</view>
				</view>
			</view>

			<!-- 通知设置 -->
			<view class="settings-group">
				<text class="group-title">消息通知</text>
				<view class="settings-items">
					<view class="settings-item">
						<view class="item-left">
							<uni-icons type="bell" size="28" color="#9C27B0"></uni-icons>
							<text class="item-title">订单通知</text>
						</view>
						<switch :checked="notificationSettings.order" @change="toggleNotification('order')"
							color="#4a90e2"></switch>
					</view>

					<view class="settings-item">
						<view class="item-left">
							<uni-icons type="sound" size="28" color="#2196F3"></uni-icons>
							<text class="item-title">促销信息</text>
						</view>
						<switch :checked="notificationSettings.promotion" @change="toggleNotification('promotion')"
							color="#4a90e2"></switch>
					</view>

					<view class="settings-item">
						<view class="item-left">
							<uni-icons type="chat" size="28" color="#FF5722"></uni-icons>
							<text class="item-title">系统消息</text>
						</view>
						<switch :checked="notificationSettings.system" @change="toggleNotification('system')"
							color="#4a90e2"></switch>
					</view>
				</view>
			</view>

			<!-- 通用设置 -->
			<view class="settings-group">
				<text class="group-title">通用设置</text>
				<view class="settings-items">
					<view class="settings-item" @click="showThemePicker">
						<view class="item-left">
							<uni-icons type="brush" size="28" color="#9C27B0"></uni-icons>
							<text class="item-title">主题颜色</text>
						</view>
						<view class="theme-preview" :style="{backgroundColor: themeColor}"></view>
						<uni-icons type="arrowright" size="24" color="#999"></uni-icons>
					</view>

					<view class="settings-item">
						<view class="item-left">
							<uni-icons type="font" size="28" color="#673AB7"></uni-icons>
							<text class="item-title">字体大小</text>
						</view>
						<slider class="font-slider" :value="fontSize" min="12" max="20" activeColor="#4a90e2"
							backgroundColor="#eee" block-color="#4a90e2" @change="changeFontSize" />
						<text class="font-size">{{fontSize}}px</text>
					</view>

					<view class="settings-item" @click="clearCache">
						<view class="item-left">
							<uni-icons type="trash" size="28" color="#F44336"></uni-icons>
							<text class="item-title">清除缓存</text>
						</view>
						<text class="cache-size">{{cacheSize}}MB</text>
						<uni-icons type="arrowright" size="24" color="#999"></uni-icons>
					</view>
				</view>
			</view>

			<!-- 关于我们 -->
			<view class="settings-group">
				<text class="group-title">关于我们</text>
				<view class="settings-items">
					<view class="settings-item" @click="navigateTo('about')">
						<view class="item-left">
							<uni-icons type="info" size="28" color="#4a90e2"></uni-icons>
							<text class="item-title">关于村村通</text>
						</view>
						<text class="version">v{{appVersion}}</text>
						<uni-icons type="arrowright" size="24" color="#999"></uni-icons>
					</view>

					<view class="settings-item" @click="navigateTo('feedback')">
						<view class="item-left">
							<uni-icons type="help" size="28" color="#FF9800"></uni-icons>
							<text class="item-title">意见反馈</text>
						</view>
						<uni-icons type="arrowright" size="24" color="#999"></uni-icons>
					</view>

					<view class="settings-item" @click="contactCustomerService">
						<view class="item-left">
							<uni-icons type="headphones" size="28" color="#4CAF50"></uni-icons>
							<text class="item-title">联系客服</text>
						</view>
						<text class="service-time">8:00-22:00</text>
						<uni-icons type="arrowright" size="24" color="#999"></uni-icons>
					</view>
				</view>
			</view>

			<!-- 退出登录按钮 -->
			<button class="logout-btn" @click="showLogoutConfirm">退出登录</button>
			<button class="" style="margin-top: 30px; opacity: 0;" @click="">本产品由李华志开发</button>
		</scroll-view>

		<!-- 主题选择器 -->
		<uni-popup ref="themePicker" type="bottom">
			<view class="theme-picker">
				<view class="picker-header">
					<text class="picker-title">选择主题颜色</text>
					<uni-icons type="close" size="28" color="#999" @click="closeThemePicker"></uni-icons>
				</view>
				<view class="theme-options">
					<view class="theme-option" v-for="(color, index) in themeColors" :key="index"
						:style="{backgroundColor: color}" @click="selectTheme(color)">
						<uni-icons v-if="themeColor === color" type="checkmarkempty" size="32" color="#fff"></uni-icons>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 退出确认弹窗 -->
		<uni-popup ref="logoutConfirm" type="dialog">
			<uni-popup-dialog type="warn" title="确认退出" content="确定要退出当前账号吗？" :before-close="true" @confirm="logout"
				@close="closeLogoutConfirm"></uni-popup-dialog>
		</uni-popup>



		<!-- 二维码弹窗 -->
		<uni-popup ref="qrCodePopup" type="center">
			<view class="qr-popup">
				<image class="qr-image" src="/static/qr-code.png"></image>
				<text class="qr-title">我的专属二维码</text>
				<text class="qr-tip">扫一扫添加我为好友</text>
				<button class="qr-btn" @click="saveQRCode">保存到相册</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					name: '乡村用户',
					avatar: '/static/default-avatar.png',
					level: 2
				},
				notificationSettings: {
					order: true,
					promotion: false,
					system: true
				},
				themeColor: '#4a90e2',
				themeColors: ['#4a90e2', '#4CAF50', '#FF9800', '#9C27B0', '#2196F3', '#F44336'],
				fontSize: 16,
				cacheSize: 12.5,
				appVersion: '1.2.0'
			}
		},
		methods: {
			// 导航到指定页面
			navigateTo(page) {
				uni.navigateTo({
					url: `/pages/settings/${page}/${page}`
				})
			},

			// 切换通知设置
			toggleNotification(type) {
				this.notificationSettings[type] = !this.notificationSettings[type]
				uni.showToast({
					title: '设置已更新',
					icon: 'success'
				})
			},

			// 显示主题选择器
			showThemePicker() {
				this.$refs.themePicker.open()
			},

			// 关闭主题选择器
			closeThemePicker() {
				this.$refs.themePicker.close()
			},

			// 选择主题颜色
			selectTheme(color) {
				this.themeColor = color
				this.closeThemePicker()
				uni.showToast({
					title: '主题已更换',
					icon: 'success'
				})
			},

			// 改变字体大小
			changeFontSize(e) {
				this.fontSize = e.detail.value
				uni.showToast({
					title: '字体大小已调整',
					icon: 'none'
				})
			},

			// 清除缓存
			clearCache() {
				uni.showLoading({
					title: '清理中...'
				})

				setTimeout(() => {
					this.cacheSize = 0
					uni.hideLoading()
					uni.showToast({
						title: '缓存已清除',
						icon: 'success'
					})
				}, 1000)
			},

			// 显示退出确认
			showLogoutConfirm() {
				this.$refs.logoutConfirm.open()
			},

			// 关闭退出确认
			closeLogoutConfirm() {
				this.$refs.logoutConfirm.close()
			},

			// 退出登录
			logout() {
				uni.showLoading({
					title: '退出中...'
				})

				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}, 500)
			},

			// 显示二维码
			showQRCode() {
				this.$refs.qrCodePopup.open()
			},

			// 保存二维码
			saveQRCode() {
				uni.showLoading({
					title: '保存中...'
				})

				setTimeout(() => {
					uni.hideLoading()
					uni.showToast({
						title: '保存成功',
						icon: 'success'
					})
					this.$refs.qrCodePopup.close()
				}, 800)
			},

			// 联系客服
			contactCustomerService() {
				uni.makePhoneCall({
					phoneNumber: '4001234567'
				})
			},

			// 返回上一页
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.settings-page {
		position: relative;
		min-height: 100vh;
		background-color: #f8f9fa;
		overflow: hidden;
	}

	/* 乡村风格背景 */
	.village-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image:
			linear-gradient(135deg, rgba(139, 195, 74, 0.1) 0%, transparent 50%),
			linear-gradient(45deg, rgba(255, 193, 7, 0.1) 0%, transparent 50%),
			url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M20,50 Q50,20 80,50" stroke="rgba(139, 195, 74, 0.1)" stroke-width="2" fill="none"/></svg>');
		background-size: cover;
		z-index: 0;
	}

	/* 顶部导航 */
	.nav-bar {
		display: flex;
		align-items: center;
		padding: 30rpx;
		position: relative;
		z-index: 1;

		.nav-back {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			background: rgba(74, 144, 226, 0.8);
			backdrop-filter: blur(10rpx);
			transition: all 0.3s;

			&:active {
				background: rgba(74, 144, 226, 1);
			}
		}

		.nav-title {
			flex: 1;
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}
	}

	/* 设置容器 */
	.settings-container {
		height: calc(100vh - 120rpx);
		padding: 20rpx;
	}

	/* 用户卡片 */
	.user-card {
		display: flex;
		align-items: center;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.05);
		border: 1rpx solid rgba(255, 255, 255, 0.3);

		.user-avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			border: 2rpx solid rgba(74, 144, 226, 0.3);
			margin-right: 20rpx;
		}

		.user-detail {
			flex: 1;

			.user-name {
				display: block;
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 5rpx;
			}

			.user-level {
				display: inline-block;
				font-size: 24rpx;
				color: #FF9800;
				background: rgba(255, 152, 0, 0.1);
				padding: 5rpx 15rpx;
				border-radius: 20rpx;
			}
		}

		.user-qr {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			background: rgba(74, 144, 226, 0.1);
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s;

			&:active {
				background: rgba(74, 144, 226, 0.2);
			}
		}
	}

	/* 设置分组 */
	.settings-group {
		background: rgba(255, 255, 255, 0.9);
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.05);
		border: 1rpx solid rgba(255, 255, 255, 0.3);

		.group-title {
			display: block;
			font-size: 28rpx;
			color: #666;
			margin-bottom: 20rpx;
		}
	}

	/* 设置项 */
	.settings-items {
		.settings-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 25rpx 0;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);

			&:last-child {
				border-bottom: none;
			}

			.item-left {
				display: flex;
				align-items: center;

				uni-icons {
					margin-right: 20rpx;
				}

				.item-title {
					font-size: 28rpx;
					color: #333;
				}
			}

			.theme-preview {
				width: 40rpx;
				height: 40rpx;
				border-radius: 8rpx;
				margin-right: 15rpx;
				border: 1rpx solid #eee;
			}

			.font-slider {
				flex: 1;
				margin: 0 30rpx;
			}

			.font-size {
				width: 80rpx;
				text-align: right;
				font-size: 26rpx;
				color: #666;
			}

			.cache-size {
				font-size: 26rpx;
				color: #666;
				margin-right: 15rpx;
			}

			.version {
				font-size: 26rpx;
				color: #666;
				margin-right: 15rpx;
			}

			.service-time {
				font-size: 26rpx;
				color: #666;
				margin-right: 15rpx;
			}
		}
	}

	/* 退出按钮 */
	.logout-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 20rpx;
		color: #F44336;
		font-size: 32rpx;
		border: 1rpx solid rgba(244, 67, 54, 0.3);
		margin-top: 20rpx;
		box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.05);
		transition: all 0.3s;

		&:active {
			background: rgba(244, 67, 54, 0.05);
		}
	}

	/* 主题选择器 */
	.theme-picker {
		background: #fff;
		border-radius: 30rpx 30rpx 0 0;
		padding: 30rpx;

		.picker-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;

			.picker-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}

			uni-icons {
				padding: 10rpx;
			}
		}

		.theme-options {
			display: flex;
			flex-wrap: wrap;
			gap: 20rpx;
			justify-content: center;

			.theme-option {
				width: 100rpx;
				height: 100rpx;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.3s;

				&:active {
					transform: scale(0.95);
				}
			}
		}
	}

	/* 二维码弹窗 */
	.qr-popup {
		background: #fff;
		border-radius: 20rpx;
		padding: 40rpx;
		width: 500rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.qr-image {
			width: 300rpx;
			height: 300rpx;
			margin-bottom: 30rpx;
			border: 1rpx solid #eee;
		}

		.qr-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 10rpx;
		}

		.qr-tip {
			font-size: 26rpx;
			color: #666;
			margin-bottom: 30rpx;
		}

		.qr-btn {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background: linear-gradient(135deg, #4a90e2, #5aa1ff);
			color: #fff;
			font-size: 30rpx;
			border-radius: 40rpx;
			border: none;
			box-shadow: 0 6rpx 20rpx rgba(74, 144, 226, 0.3);
		}
	}
</style>